<template>
	<div :class="['widgets-home', customizing ? 'customizing' : '']" ref="main">
		<div class="widgets-content">
			<el-form :model="form" :rules="rules" ref="dialogForm" :disabled="mode == 'show'" label-width="130px" label-position="top">
				<el-row :gutter="1">
					<el-col :span="24">
                        <div class="titleBox">
                            {{mode=='show'?'查看工艺路线':mode == 'edit'?'编辑工艺路线':'新增工艺路线'}}
                            <div>
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存</el-button>
                                <!-- <el-button type="primary" @click="submit" :disabled="mode == 'show'">保存并新增</el-button>
                                <el-button type="primary" @click="submit" :disabled="mode == 'show'">审核</el-button>
                                <el-button type="danger" @click="submit" :disabled="mode == 'show'">退出</el-button> -->
                            </div>
                        </div>
					</el-col>
				</el-row>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								基本信息
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :xs="24" :sm="3">
							<el-form-item label="编号" prop="route_code">
								<el-input v-model="form.route_code" placeholder="请输入(不填写自动生成)" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="名称" prop="route_name">
								<el-input v-model="form.route_name" placeholder="请输入" clearable></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="工艺分组" prop="cate_id">
                                <el-select v-model="form.cate_id" placeholder="请选择工艺分组" style="width:100%" clearable filterable>
                                    <el-option v-for="item in cateList" :key="item.id" :label="item.cate_name" :value="item.id"/>
                                </el-select>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="工艺类型" prop="route_type">
                                <el-select v-model="form.route_type" placeholder="请选择工艺类型" style="width:100%" clearable filterable>
                                    <el-option label="物料" :value="1"/>
                                    <el-option label="物料组" :value="2"/>
                                    <el-option label="通用" :value="3"/>
                                </el-select>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料名称" prop="product_id">
								<el-input v-model="product_name" placeholder="请选择" readonly @click="selectMater"></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料代码">
								<el-input v-model="product_code" placeholder="自动生成" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="物料类别">
								<el-input v-model="product_cate" placeholder="自动生成" readonly></el-input>
							</el-form-item>
						</el-col>
						<el-col :xs="24" :sm="3">
							<el-form-item label="规格型号">
								<el-input v-model="product_spec" placeholder="自动生成" readonly></el-input>
							</el-form-item>
						</el-col>
						<!-- <el-col :xs="24" :sm="3">
							<el-form-item label="工艺路线组别" prop="goods_name">
								<el-input v-model="form.goods_name" placeholder="请选择" clearable></el-input>
							</el-form-item>
						</el-col> -->
						<el-col :xs="24" :sm="3">
							<el-form-item label="排队时间" prop="line_time">
                                <el-date-picker v-model="form.line_time" type="date" placeholder="排队时间" style="width: 100%;" :value-format="'YYYY-MM-DD'"></el-date-picker>
							</el-form-item>
						</el-col>
                        <el-col :xs="24" :sm="3">
							<el-form-item label="是否按顺序加工" prop="is_order">
                                <el-switch v-model="form.is_order" :active-value="0" :inactive-value="1"></el-switch>
							</el-form-item>
						</el-col>
					</el-row>
                    <el-col :span="12">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" type="textarea" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								工序设置
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1">
						<el-col :span="24">
                            <el-button type="primary" size="small" @click="selectChild" :disabled="mode == 'show'">选择工序</el-button>
							<sc-form-table ref="table" v-model="form.route_detail" :addTemplate="addTemplate" placeholder="暂无数据" hideAdd height="350" drag-sort>
								<el-table-column prop="work_code" label="工序编号" align="center" width="100"></el-table-column>
								<!-- <el-table-column prop="sort" label="工序排序" align="center">
									<template #default="scope">
                                        <el-input v-model="scope.row.sort" placeholder="请输入" clearable class="input"></el-input>
									</template>
								</el-table-column> -->
                                <el-table-column prop="work_name" label="工序名称" align="center">
									<template #default="scope">
                                        <el-input v-model="scope.row.work_name" placeholder="请选择" clearable readonly @click="selectChild(scope.row,scope.$index)" class="input"></el-input>
									</template>
								</el-table-column>
								<!-- <el-table-column prop="rejects_all" label="不良品列表" align="center"></el-table-column> -->
								<el-table-column prop="time_unit" label="时间单位" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.time_unit" placeholder="时间单位" clearable class="input"></el-input>
									</template>
                                </el-table-column>
								<el-table-column prop="standard_time" label="标准工时" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.standard_time" placeholder="标准工时" clearable class="input"></el-input>
									</template>
                                </el-table-column>
								<el-table-column prop="work_power" label="报工权限" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.work_power" style="width: 100%" disabled>
                                            <el-option label="班组" :value="1"/>
                                            <el-option label="人员" :value="2"/>
                                        </el-select>
									</template>
                                </el-table-column>
								<el-table-column prop="match" label="报工配比" align="center" width="80">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.match" placeholder="报工配比" clearable class="input"></el-input>
									</template>
                                </el-table-column>
								<el-table-column prop="maching" label="加工说明" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.maching" placeholder="加工说明" clearable class="input"></el-input>
									</template>
                                </el-table-column>
                                <el-table-column prop="is_last" label="是否首道工序" align="center">
									<template #default="scope">
										<el-switch v-model="scope.row.is_first" :active-value="1" :inactive-value="0" @change="changeIsfirst(scope.row,scope.$index)"></el-switch>
									</template>
								</el-table-column>
								<el-table-column prop="is_last" label="是否末道工序" align="center">
									<template #default="scope">
										<el-switch v-model="scope.row.is_last" :active-value="1" :inactive-value="0" @change="changeIslast(scope.row,scope.$index)"></el-switch>
									</template>
								</el-table-column>
								<el-table-column prop="type" label="委外" align="center">
									<template #default="scope">
										<el-switch v-model="scope.row.is_out" :active-value="1" :inactive-value="0" disabled></el-switch>
									</template>
								</el-table-column>
								<el-table-column prop="type" label="需要检验" align="center">
									<template #default="scope">
										<el-switch v-model="scope.row.is_quality" :active-value="1" :inactive-value="0" disabled></el-switch>
									</template>
								</el-table-column>
								<el-table-column prop="quaqty_type" label="检验方式" align="center">
                                    <template #default="scope">
                                        <el-select v-model="scope.row.quaqty_type" placeholder="检验方式" style="width:100%" disabled>
                                            <el-option label="抽检" :value="0"/>
                                            <el-option label="全检" :value="1"/>
                                        </el-select>
									</template>
                                </el-table-column>
								<el-table-column prop="quaqty_rate" label="抽检比例" align="center"></el-table-column>
								<el-table-column prop="check_mast" label="检验要求" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.check_mast" placeholder="检验要求" clearable class="input"></el-input>
									</template>
                                </el-table-column>
								<el-table-column prop="remark" label="备注" align="center">
                                    <template #default="scope">
                                        <el-input v-model="scope.row.remark" placeholder="备注" clearable class="input"></el-input>
									</template>
                                </el-table-column>
							</sc-form-table>
						</el-col>
					</el-row>
				</el-card>
				<el-card class="box-card">
					<el-row :gutter="1">
						<el-col :span="24">
							<div class="titleBox titleBox1">
								附件
							</div>
						</el-col>
					</el-row>
					<el-row :gutter="1" class="box-card1">
						<el-col :xs="24" :sm="18">
							<el-form-item label=" " prop="enclosure" label-width="0">
								<sc-upload-file v-model="form.enclosure" :limit="1" :data="{otherData:'demo'}" tip="" >
									<el-button type="primary" icon="el-icon-upload">选择文件</el-button>
								</sc-upload-file>
							</el-form-item>
						</el-col>
					</el-row>
				</el-card>
			</el-form>
		</div>
	</div>
    <spare-list v-if="dialog.save" ref="saveDialog" @success="handleSuccess" @closed="dialog.save = false" draggable></spare-list>
    <craft-list v-if="dialog.craft" ref="craftDialog" @success="craftBack" @closed="dialog.craft = false" draggable></craft-list>
</template>

<script>
import SpareList from '@/views/device/setting/spare/spareList.vue'
import CraftList from '../craft/craftList.vue'
export default {
	name: '新增BOM',
    components: {SpareList, CraftList},
	data() {
		return {
			dialog: {
                save:false,
                craft:false,
			},
			//表单数据
			form: {
				id: "",
				cate_id: "",
				route_code: "",
				route_name: "",
				route_type: "",
				product_id: "",
				is_order: "",
				line_time: "",
				remark: "",
				status: "",
				enclosure: "",
                route_detail:[],
			},
			//验证规则
			rules: {
				goods_name: [{ required: true, message: '请输入物料名称' }],
			},
            product_name: "",
            product_code: "",
            product_cate: "",
            product_spec: "",
			customizing: false,
			addTemplate: {},
			mode: '',
			cateList:[],
            enclosure: ""
		}
	},
	mounted() {
		this.getCate()
		if (this.$route.query.id) {
			this.setData()
			this.mode = this.$route.query.zhuangtai
		}
	},
	methods: {
        // 获取分类
		async getCate(){
			var res = await this.$API.craft.routeCate.list.get();
			this.cateList = res.data
		},
		//表单注入数据
		async setData() {
			var reqData = {id: this.$route.query.id}
			var res = await this.$API.craft.workroute.detail.post(reqData);
			this.form.id = this.$route.query.id
			this.form.cate_id = res.data.cate_id
			this.form.route_code = res.data.route_code
			this.form.route_name = res.data.route_name
			this.form.route_type = res.data.route_type
			this.form.product_id = res.data.product_id
			this.form.is_order = res.data.is_order
			this.form.line_time = res.data.line_time
			this.form.remark = res.data.remark
			this.form.work_id = res.data.work_id
			this.form.status = res.data.status
			this.form.enclosure = res.data.enclosure
            let array = []
            res.data.route_detail.map(item=>{
                array.push({
                    id:item.id,
                    work_id:item.work_id,
                    work_code:item.work_order.work_code,
                    work_name:item.work_order.work_name,
                    quaqty_type:item.work_order.quaqty_type,
                    quaqty_rate:item.work_order.quaqty_rate,
                    is_quality:item.work_order.is_quality,
                    rejects_all:item.work_order.rejects_all,
                    is_out:item.work_order.is_out,
                    is_last:item.is_last,
                    time_unit:item.time_unit,
                    standard_time:item.standard_time,
                    match:item.match,
                    sort:item.sort,
                    maching:item.maching,
                    check_mast:item.check_mast,
                    is_first:item.is_first,
                    remark:item.remark,
                })
            })
			this.form.route_detail = array
            this.product_code = res.data.product_detail.goods_code
            this.product_name = res.data.product_detail.goods_name
            this.product_spec = res.data.product_detail.goods_spec
            this.product_cate = res.data.product_detail.cate_name
		},
		resetForm(formName) {
			this.$refs[formName].resetFields();
            this.product_code = ''
            this.product_name = ''
            this.product_spec = ''
            this.product_cate = ''
            this.form.route_detail = []
		},
		//表单提交方法
		submit() {
            let first = true
            let end = true
            this.form.route_detail.map((item,index)=>{
                item.sort = index + 1
            })
            first = this.form.route_detail.find(item=>{return item.is_first == 1})
            end = this.form.route_detail.find(item=>{return item.is_last == 1})
            if(first && end){
                this.$refs.dialogForm.validate(async (valid) => {
                    if (valid) {
                        this.isSaveing = true;
                        var res = [];
                        if (this.form.id) {
                            res = await this.$API.craft.workroute.edit.post(this.form);
                        } else {
                            res = await this.$API.craft.workroute.add.post(this.form);
                        }
                        this.isSaveing = false;
                        if (res.code == 1) {
                            this.$message.success("操作成功")
                            if (this.mode == '') {
                                this.resetForm('dialogForm')
                            } else {
                                this.setData()
                            }
                        } else {
                            this.$alert(res.message, "提示", {type: 'error'})
                        }
                    } else {
                        return false;
                    }
                })
            }else{
                if(!first){
                    this.$message.error("请选择首道工序!")
                }else if(!end){
                    this.$message.error("请选择末道工序!")
                }
            }
		},
        selectMater(){
            if(this.mode != 'show'){
                this.dialog.save = true
                this.$nextTick(() => {
                    this.$refs.saveDialog.open('route')
                })
            }
        },
        handleSuccess(data){
            this.form.product_id = data[0].id,
            this.product_code = data[0].goods_code
            this.product_name = data[0].goods_name
            this.product_spec = data[0].goods_spec
            this.product_cate = data[0].cate_name
        },
        selectChild(row,index){
            this.dialog.craft = true
            this.$nextTick(() => {
                this.$refs.craftDialog.open('bomChild').setData(index)
            })
        },
        craftBack(data,mode,index){
            if(index == undefined){
                let array = []
                console.log('data :>> ', data);
                data.map((item)=>{
                    array.push({
                        work_id:item.id,
                        work_code:item.work_code,
                        work_name:item.work_name,
                        work_power:item.work_power,
                        quaqty_type:item.quaqty_type,
                        quaqty_rate:item.quaqty_rate,
                        is_quality:item.is_quality,
                        is_out:item.is_out,
                        rejects_all:item.rejects_all,
                        is_first:0,
                        is_last:0,
                        match: 1
                    })
                })
                let existingIds = this.form.route_detail.map(item => item.work_id);
                for(let i = array.length - 1; i >= 0; i--){
                    if(existingIds.includes(array[i].work_id)){
                        array.splice(i, 1);
                    }
                }
                this.form.route_detail = [...this.form.route_detail,...array]
            }else{
                let existingIds = this.form.route_detail.map(item => item.work_id);
                if(!existingIds.includes(data[0].id)){
                    this.form.route_detail[index].work_id = data[0].id
                    this.form.route_detail[index].work_code = data[0].work_code
                    this.form.route_detail[index].work_name = data[0].work_name
                    this.form.route_detail[index].quaqty_type = data[0].quaqty_type
                    this.form.route_detail[index].quaqty_rate = data[0].quaqty_rate
                    this.form.route_detail[index].is_quality = data[0].is_quality
                    this.form.route_detail[index].rejects_all = data[0].rejects_all
                    this.form.route_detail[index].is_out = data[0].is_out
                }
            }
        },
        changeIsfirst(row,index){
            for (let i = 0; i < this.form.route_detail.length; i++) {
                this.form.route_detail[i].is_first = 0;
            }
            this.form.route_detail[index].is_first = 1;
        },
        changeIslast(row,index){
            for (let i = 0; i < this.form.route_detail.length; i++) {
                this.form.route_detail[i].is_last = 0;
            }
            this.form.route_detail[index].is_last = 1;
        },
	}
}
</script>

<style>
.sc-upload-multiple[data-v-f680f9e4] .el-upload--picture-card {
	width: 60px;
	height: 60px;
}

[data-v-f680f9e4] .el-upload-list__item {
	width: 60px;
	height: 60px;
}
</style>
<style lang="scss">
.widgets-home {
	display: flex;
	flex-direction: row;
	flex: 1;
	min-height: 100%;
	max-height: 100%;
}

.widgets-content {
	flex: 1;
	overflow: auto;
	overflow-x: hidden;
	padding: 15px 15px;
	.selectBox {
		display: flex;
		align-items: center;
	}
	.el-col {
		margin-right: 20px;
	}
	.el-form-item {
		flex-direction: column;
		justify-content: flex-start;
		align-items: flex-start;
		.el-form-item__label {
			justify-content: flex-start;
		}
		.el-form-item__content {
			width: 100%;
		}
	}
	.box-card {
		margin-bottom: 10px;
	}
	.box-card1 {
		.el-form-item__label {
			justify-content: flex-start;
			height: 0;
		}
	}
	.box-card2 {
		.el-col {
			margin-right: 0;
		}
	}
	.el-form {
		//background: #ffffff;
		//padding: 20px;
		min-height: 90%;
		.titleBox {
			font-size: 18px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #333333;
			padding-bottom: 10px;
			border-bottom: 1px solid #E6E6E6;
			margin-bottom: 14px;
			display: flex;
			align-items: center;
			justify-content: space-between;
		}
		.titleBox1 {
			font-weight: 600;
			border: none;
			font-size: 16px;
		}
	}
}

.customizing .widgets-wrapper {
	margin-right: -360px
}

.customizing .widgets-wrapper .el-col {
	padding-bottom: 15px;
}

.customizing .widgets-wrapper .draggable-box {
	border: 1px dashed var(--el-color-primary);
	padding: 15px;
}

.customizing .widgets-wrapper .no-widgets {
	display: none;
}

.customizing .widgets-item {
	position: relative;
	margin-bottom: 15px;
}

@media (max-width: 992px) {
	.customizing .widgets {
		transform: scale(1) !important;
	}

	.customizing .widgets-aside {
		width: 100%;
		position: absolute;
		top: 50%;
		right: 0;
		bottom: 0;
	}

	.customizing .widgets-wrapper {
		margin-right: 0;
	}
}
</style>
